import { Button, Card, Input, Space, Spin, Table, Tree ,Upload,Popconfirm,message} from 'antd';
import { useState, useEffect, useRef } from 'react'
import Api from '../../../../../utils/api';
import JcdjcApi from "../../../../../utils/apis/JcdjcApi";
import _ from 'lodash';
import ScrollTable from '../../../../common/ScrollTable';
import { UploadOutlined } from '@ant-design/icons';
import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';
import FetchHelper from '../../../../../utils/helper/fetch-helper';
export default function Jcdjc() {
    const [jcdjcData, setJcdjcData] = useState();
    const [total, setTotal] = useState();
    const [allColumns, setAllColumns] = useState();
    const [loading, setLoading] = useState();
    const rootRef = useRef();
    const history=useHistory();

    const [params, setParams] = useState({
        pageSize: 10,
        pageNum: 1
    });
const [value,setValue]=useState()
    useEffect(() => {
        if (params) {
            setLoading(true)
            JcdjcApi.list(params).then(resp => {
                if(value){
                    const filterData=resp?.rows.filter(item=>item?.zdm.includes(value))
                    setJcdjcData(filterData)
                }else{
                    setJcdjcData(resp.rows)
                }
                
                setTotal(resp.total);
            }).finally(e => {
                setLoading(false)
            })
        }
    }, [params,value])

    // 导出数据地址
    const url = '/admin-api/ybyj/jcd/export';
    // const tableCols = allColumns?.[params.updateTime||params.jcdjcMiddle]||[];
    //搜索
    const onSearch=(value)=>{
        setValue(value)
        setParams(params=>{
            return {
                ...params,
                zdm:value,
                pageNum:1
            }
        })
    }
    const props={
        name: 'file',
        action: '/admin-api/ybyj/jcd/import',
        headers: {
            authorization: 'authorization-text',
        },
        beforeUpload(file) {
            const isValidFormat = file.type === 'application/vnd.ms-excel';
            

            if (!isValidFormat) {
                message.error('只能上传 .xls 格式的文件!');
            }
          

            return isValidFormat 
        },
        onChange(info) {
            console.log('node',info)
            if (info.file.status === 'done') {
                message.success(`${info.file.name} 文件上传成功`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} 文件上传失败`);
                alert(`数据表格可能与本数据表不一致，最好先导出一份数据，使用其模板写入数据后在进行上传`)
            }
        },
    }
    const addJcd=()=>{
        history.push(`/manager/jcdjcAdd`)
    }
    const jccdjcEdit=(record)=>{
        history.push(`/manager/jcdjcEdit/${record.id}`)
    }
    const jccdjcLook=(record)=>{
        history.push(`/manager/jcdjcLook/${record.id}`)
    }
    const jccdjcDelete=(record)=>{
        const newJcdDatas=jcdjcData.filter(function(arr){
            return arr.id!==record.id
        })
        FetchHelper.deleteJson(`/admin-api/ybyj/jcd/`+record.id).then(() => alert('删除成功')).catch(error => alert("删除失败") + error)
        setJcdjcData(newJcdDatas)
    }
    return <div className="layout-h h100">
        <Card size="small" className='h100 fill w0' style={{
            position: "relative",
        }} bodyStyle={{

            display: "flex",
            flexDirection: "column",
            height: "100%"
        }}>
            <div style={{
                marginBottom: 12,
                display: 'flex',
                alignItems: "center",
                justifyContent: "space-between"
            }}>
                <Space>
                <Button type="primary" onClick={addJcd}>新增</Button>
                        <Upload {...props}>
                            <Button icon={<UploadOutlined/>}>数据导入</Button>
                        </Upload>
                    {/* <Button onClick={() => fetch(url, {
                        method: 'POST',

                        headers: {
                            'Content-Type': "application/json;charset=UTF-8",
                        }
                    }).then(response => response.blob()).then(blob => {
                        const a = document.createElement("a");
                        a.download = "data.xls";
                        a.href = URL.createObjectURL(blob);
                        a.click();
                    }).catch(error => console.log(error))}>数据导出</Button> */}
                </Space>

                <div>
                    <Input.Search placeholder='输入站点查找'
                    allowClear
                    enterButton={true}
                    onSearch={onSearch}
                    />
                </div>
            </div>

            <div ref={rootRef} className="fill h0">
                {<ScrollTable style={{
                   
                }}
                    loading={loading}
                    parentNode={rootRef.current}
                    size='small'
                    bordered
                    dataSource={jcdjcData}
                    // scroll={{
                    //     x: 320 + _.sumBy(tableCols, 'width'),
                    // }}
                    columns={[
                        {
                            title: '站点名称',
                            dataIndex: 'zdm',
                            fixed: 'left',
                            width: 160
                           
                        },{
                            title: '责任人',
                            dataIndex: 'zrr',
                            fixed: 'left',
                            width: 160
                            
                        },
                        {
                            title: '责任人电话',
                            dataIndex: 'zrrdh',
                           
                            width: 160
                           
                        },{
                            title: '高度',
                            dataIndex: 'gd',
                            
                            width: 160
                           
                        },{
                            title: '监测点类型',
                            dataIndex: 'jcdlx',
                          
                            width: 160
                           
                        },{
                            title: '监测警戒线',
                            dataIndex: 'jcjjx',
                            
                            width: 160
                           
                        },{
                            title: '经度',
                            dataIndex: 'jd',
                            
                            width: 160
                           
                        },{
                            title: '地理信息',
                            dataIndex: 'geom',
                         
                            width: 160
                           
                        },{
                            title: '站点地址',
                            dataIndex: 'zddz',
                            
                            width: 160
                           
                        },{
                            title: '创建时间',
                            dataIndex: 'createTime',
                            
                            width: 160
                           
                        },{
                            title: '操作',
                            key: 'caozuo',
                            width: 260,
                            render: (text, record) => {
                                return <Space size="middle">
                                    <Button onClick={e => {jccdjcLook(record)}}>查看</Button>

                                    <Button onClick={e => {jccdjcEdit(record)}}>编辑</Button>


                                    <Popconfirm title="确定删除吗?" onConfirm={e => jccdjcDelete(record)}>
                                        {/* <Button onComfir={e => { deleteHandle(record) }}>删除</Button> */}
                                        <Button>删除</Button>
                                    </Popconfirm>

                                </Space>

                            }
                        }
                        // ...tableCols
                    ].map(item => {
                        return {
                            ...item,
                           
                        }
                    })}
                    pagination={{
                        current: params.pageNum,
                        pageSize: params.pageSize,
                        total,
                      
                    }}
                    onChange={({current})=>{
                        setParams(params=>{
                            return {
                                ...params,
                                pageNum:current
                            }
                        })
                    }}
                
                />}
            </div>
        </Card>
    </div>
}